<template>
  <div>
    <!-- top -->
    <div class="top">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        @sidebar-line-height="20"
      />
    </div>
    <!-- content -->
    <div class="content">
      <div class="types">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="type in types"
            :key="type.id"
            :title="type.name"
            @click="changeType(type.name)"
          />
        </van-sidebar>
      </div>
      <div class="products">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="product" v-for="product in pros" :key="product.id">
            <img :src="product.banner" alt="" />
            <p class="proname">{{ product.name }}</p>
            <p class="price">价格：￥{{ product.price }}元</p>
            <van-button type="warning" round>添加购物车</van-button>
          </div>
        </van-list>
      </div>
    </div>
    <!-- footer -->
    <myFooter></myFooter>
  </div>
</template>

<script>
import myFooter from '@/components/MyFooter/index'
import {
  getTypesOnly,
  getPro
} from '../../request/Types/request'
export default {
  components: {
    myFooter
  },
  data: function () {
    return {
      value: '',
      activeKey: 0,
      types: [],
      pros: [],
      loading: false,
      finished: false,
      page: 1,
      typename: '全部'
    }
  },
  created: function () {
    this.initTypes()
  },
  mounted: function () {
    //
  },
  updated: function () {
    //
  },
  methods: {
    initTypes: async function () {
      const res = await getTypesOnly()
      // 给所有分类最前面添加全部
      this.types = res
      this.types.unshift({
        id: +new Date(),
        name: '全部'
      })
      // this.pros = await getPro()
    },
    onLoad: async function () {
      // 懒加载改为直接调用共用函数
      this.getProducts()
    },
    // 点击分类事件
    changeType: async function (typename) {
      this.typename = typename
      // 需要先初始化数据，否则数组key值会重复、翻页页数会被沿用
      // 初始化页数
      this.page = 1
      // 初始化商品数组
      this.pros = []
      this.finished = false
      // 重新获取数据
      this.getProducts()
    },
    getProducts: async function () {
      // 类似分页的 (pageIndex-1)*pageSize~pageIndex*pageSize
      var pros = await getPro(this.typename)
      pros = pros.slice((this.page - 1) * 5, this.page * 5)
      if (pros.length < 5) {
        this.finished = true
      } else {
        this.page++
      }
      this.loading = false
      this.pros = this.pros.concat(pros)
    }
  }
}
</script>

<style lang="less" scoped>
.types {
  float: left;
  // margin-bottom: 50px;
}
.products {
  float: right;
  margin: 0 10px 20px 0;
  // 显示"没有更多"
  padding-bottom: 50px;
}
.product {
  width: 260px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
}
.product img {
  width: 100%;
  border-radius: 10px;
}
.product .price {
  font-size: 20px;
  font-weight: bold;
  color: #f00;
}
.product .van-button {
  width: 100%;
  font-size: 15px;
}
.product .proname {
  line-height: 28px;
}
.van-sidebar {
  position: fixed;
  top: 36px;
  left: 0;
  max-height: 70vh;
  overflow-y: scroll;
}
</style>
